<script setup>
import mediaButton from "@/components/left/media-button.vue";
import robotheader from "@/components/header/robot-header.vue"
import mapContainer from "@/components/center/MapContainer.vue";
import varietyData from "@/components/right/varietyData.vue";
import liveMedia from "@/components/center/live-media.vue";
import taskInfo from "@/components/center/Task-Info.vue"
import {ref} from "vue";
import graph from "@/components/center/graph.vue"
let activeBox = ref(1); // 默认活动盒子为1
const selectBox = (option) => {
  activeBox.value = option; // 更新活动盒子
};
</script>

<template>
  <div>
    <robotheader></robotheader>
  </div>
  <div class="control-center">
    <div class="left">
        <media-button @option-selected="selectBox"></media-button>
    </div>
    <div class="center">
        <div v-if="activeBox===1">
          <live-media></live-media>
        </div>
        <div v-if="activeBox===2" class="map">
          <map-container></map-container>
        </div>
        <div v-if="activeBox===3" class="graph">
          <graph></graph>
        </div>
        <div >
            <task-info></task-info>
        </div>
    </div>
    <div class="right">
        <variety-data></variety-data>
    </div>
  </div>
</template>

<style scoped>

</style>
